import { Card, Divider } from "antd";
import { Fragment, useState } from "react";
import _styles_ from "../table/index.module.css";

import SCard from "../card";

const styles = {
  header: { backgroundColor: "#e5e5e5" },
  title: { display: "flex", justifyContent: "center" },
  downIcon: { transform: "rotate(180deg)" },
};
const defaultConfigs = {
  columns: 3,
  span: 8,
  gap: "10px",
  // justifyItems: "normal",
};

/**
 * @param {Object} props
 * @param {Array<{label?: string, value?: string}>} props.items - 展示项数组
 * @param {Object} props.configs - 配置项对象
 * @param {string} [props.configs.title] - Card标题
 * @param {string} [props.configs.columns] - 列数
 * @param {string} [props.configs.gap] - 列间距
 * @param {string} [props.configs.justifyItems] - 行上对齐方式(start | normal ...)
 * @param {Object} [props.configs.CardStyles] - Card样式
 */
function Fields(props) {
  const {
    items = {},
    configs = {},
    contentBefore,
    children,
    ...restProps
  } = props;
  const _configs = Object.assign({}, defaultConfigs, configs || {});

  return (
    <>
      <SCard configs={configs} {...restProps}>
        {contentBefore && <div>{contentBefore}</div>}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: `repeat(${_configs.columns}, 1fr)`,
            gap: `${_configs.gap}`,
            justifyItems: `${_configs.justifyItems}`,
          }}
        >
          {items.map((item) => {
            return (
              <Fragment key={item.value}>
                <div
                  key={item.value}
                  style={{ display: "flex", flexDirection: "column" }}
                >
                  <span>{item.label}</span>
                  <span>{item.value}</span>
                </div>
              </Fragment>
            );
          })}
        </div>
        {children && <>{children}</>}
      </SCard>
    </>
  );
}

export default Fields;
